<template>
  <div class="app-container">
    <el-form
      :model="addForm"
      :rules="rules"
      ref="addForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="商品名称" prop="goodName">
        <el-input v-model="addForm.goodName"></el-input>
      </el-form-item>
      <el-form-item label="商品分类" prop="goodType">
        <el-cascader
          v-model="addForm.goodType"
          :options="options"
          :props="{ expandTrigger: 'hover' }"
          @change="handleChange"
          ref="cascader"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="商品介绍" prop="goodInfo">
        <el-input v-model="addForm.goodInfo"></el-input>
      </el-form-item>
      <el-form-item label="商品原价" prop="goodPrice">
        <el-input v-model="addForm.goodPrice"></el-input>
      </el-form-item>
      <el-form-item label="商品现价" prop="goodNowPrice">
        <el-input v-model="addForm.goodNowPrice"></el-input>
      </el-form-item>
      <el-form-item label="商品库存" prop="goodCount">
        <el-input v-model="addForm.goodCount"></el-input>
      </el-form-item>
      <el-form-item label="商品状态" prop="goodStatus">
        <el-radio-group v-model="addForm.goodStatus">
          <el-radio :label="1">上架</el-radio>
          <el-radio :label="0">下架</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="上传商品图片">
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          list-type="picture"
          with-credentials
          :multiple="false"
          :auto-upload="false"
          before-upload:beforeupload
          :on-change="setFile"
          :limit="1"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('addForm')">添加商品</el-button>
        <el-button @click="resetForm('addForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { addGood } from "@/api/good";
import { getAllType } from "@/api/goodtype";
export default {
  data() {
    return {
      rules: {
        goodName: [
          { required: true, message: "商品名称不能为空", trigger: "blur" },
        ],
        goodType: [
          { required: true, message: "商品分类不能为空", trigger: "blur" },
        ],
        goodInfo: [
          { required: true, message: "商品信息不能为空", trigger: "blur" },
        ],
        goodPrice: [
          { required: true, message: "商品价格不能为空", trigger: "blur" },
        ],
        goodNowPrice: [
          { required: true, message: "商品现价不能为空", trigger: "blur" },
        ],
        goodCount: [{ required: true, message: "商品库存", trigger: "blur" }],
      },

      addForm: {
        goodName: "",
        goodType: "",
        goodInfo: "",
        goodPrice: "",
        goodCount: "",
        goodStatus: "",
        status: "",
      },

      // 文件列表
      fileList: [],
      // 商品图片文件
      file: "",

      //分类选择器
      value: [],

      options: [],
    };
  },

  methods: {
    handleChange(value) {
      console.log(value);
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },

    beforeupload(file) {
      console.log(file);
    },

    setFile(file, fileList) {
      this.file = file;
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var data = new FormData();

          data.append("goodName", this.addForm.goodName);
          data.append(
            "goodType",
            this.$refs.cascader.getCheckedNodes(true)[0].data.value
          );
          data.append("goodInfo", this.addForm.goodInfo);
          data.append("goodPrice", this.addForm.goodPrice);
          data.append("goodNowPrice", this.addForm.goodNowPrice);
          data.append("goodCount", this.addForm.goodCount);
          data.append("goodStatus", this.addForm.goodStatus);

          // 文件列表
          console.log(this.file.raw);
          data.append("file", this.file.raw);
          addGood(data).then((res) => {});
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    //设置父节点
    setParentId(val) {
      this.addForm.typeParentId = val[0];
    },

    //初始化分类选择器
    init() {
      // 加载所有标签
      getAllType().then((res) => {
        var data = res.data;
        // 遍历父节点进行删除children  in 遍历拿数组索引 of 遍历 拿数组对象

        for (var item of data) {
          console.log(item);
          this.removeChildren(item);
        }
        this.options = data;

        this.options = res.data;
      });
    },

    //去除树型结构的children树型 参数为父节点
    removeChildren(node) {
      // 假设没有长度 或children 长度为0 删除该属性
      if (!node.children || !node.children.length) {
        delete node.children;
        // 要记得返回不然报错
        return;
      }

      // 遍历children 继续删除
      for (var item of node.children) {
        this.removeChildren(item);
      }

      return node;
    },
  },

  created() {
    this.init();
  },
};
</script>

<style>
</style>